<template>
  <div class="pagination">
    <button :disabled = "pageNo === 1" @click=reducePageNo>上一页</button>
    <button v-if="startNumAndEndNum.start >1" @click="OnePageNo"> 1</button>
    <button v-if="startNumAndEndNum.start > 2">···</button>
    <!-- v-for 与 v-if 最好不要一起使用 可以结合 v-show -->
    <button
      v-for="(page, index) in startNumAndEndNum.end"
      :key="index"
      v-show="page >= startNumAndEndNum.start"
      @click="getPageNo(page)"
      :class="{actives:pageNo == page}"
    >
      {{ page }}
    </button>

    <button v-if="startNumAndEndNum.end < totalPage">···</button>
    <button v-if="startNumAndEndNum.end < totalPage - 1" @click="lastPageNo">
      {{ totalPage }}
    </button>
    <button :disabled = "pageNo === totalPage" @click="addPageNo">下一页</button>

    <button style="margin-left: 30px">共 {{ total }} 条</button>
  </div>
</template>


<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  /*
    pageNo:当前第几个
    pageSize:代表每一页展示多少条数据
    total:代表整个分页一共要展示多少条数据
    continues:代表分页连续页码个数
   */
  name: "PaginAtion",
  components: {},
  data() {
    //这里存放数据
    return {
      mypageNO: this.pageNo,
    };
  },
  //父子之间通信
  props: ["pageNo", "pageSize", "total", "continues"],
  //监听属性 类似于data概念
  computed: {
    //总共多少页
    totalPage() {
      //Math.ceil向上取整
      return Math.ceil(this.total / this.pageSize);
    },
    //pageNo:当前第几个 获取往前和往后的2条数据
    //start开始 end结束
    startNumAndEndNum() {
      const { pageNo, continues } = this;
      let start = 0,
        end = 0;
      if (continues > this.totalPage) {
        (start = 1), (end = this.totalPage);
      } else {
        start = pageNo - parseInt(continues / 2);
        end = pageNo + parseInt(continues / 2);
        if (start < 1) {
          (start = 1), (end = continues);
        } else if (end > this.totalPage) {
          (end = this.totalPage), (start = this.totalPage - continues);
        }
      }
      return { start, end };
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getPageNo(page) {
        this.$emit("getPageNo",page)
    },
    reducePageNo(){
        this.$emit("getPageNo",this.pageNo-1)
    },
    addPageNo(){
        this.$emit("getPageNo",this.pageNo+1)
    },
    OnePageNo(){
        this.$emit("getPageNo",1)
    },
    lastPageNo(){
        this.$emit("getPageNo",this.totalPage)
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.pagination {
  text-align: center;
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
  .actives{
    background: pink;
}
}
</style>